<script setup lang="ts">
import Navigation from './components/Navigation.vue'
import NavigationMobile from './components/NavigationMobile.vue'
import NavigationTablet from './components/NavigationTablet.vue'
import Authorization from './components/Authorization.vue'
import Date from './components/Date.vue'
import '@animxyz/core'
</script>

<template>
  <XyzTransition appear xyz="left-100% duration-14">
    <header class="sticky hidden h-screen w-1/6 border-r lg:block">
      <section class="mt-9 duration-150 hover:scale-105">
        <router-link class="flex items-center justify-center" to="/">
          <img src="./assets/img/owl.png" alt="logo" width="50" height="50" />
          <h1 class="ml-2 text-2xl font-bold text-black">SoVi</h1>
        </router-link>
      </section>

      <Navigation />
    </header>
  </XyzTransition>

  <XyzTransition appear xyz="left-100% duration-14">
    <header class="sticky hidden h-screen w-1/6 border-r md:block lg:hidden">
      <section class="duration-150 hover:scale-105">
        <router-link to="/">
          <img src="./assets/img/owl.png" alt="logo" width="50" height="50" class="mx-auto mt-5 block" />
        </router-link>
      </section>

      <NavigationTablet />
    </header>
  </XyzTransition>

  <header class="fixed bottom-0 z-50 h-12 w-full bg-white md:hidden">
    <hr class="pb-3 md:hidden" />
    <NavigationMobile />
  </header>

  <main class="w-full p-3 sm:p-9">
    <XyzTransition appear xyz="up-100% duration-14">
      <section class="flex justify-between">
        <Date />
        <Authorization />
      </section>
    </XyzTransition>

    <section class="relative sm:mt-8">
      <router-view></router-view>
    </section>
  </main>
</template>
